import React from 'react';
import React from 'react';
import { Button, Calendar } from 'packages/ui-shared/src/atoms';
import { Popconfirm } from 'packages/ui-shared/src/molecules';
import type { Schedule } from '../pages/SchedulingManagementPage';

interface ScheduleCalendarProps {
  type: 'day' | 'week' | 'month';
  schedules: Schedule[];
  onEdit: (schedule: Schedule) => void;
}

const ScheduleCalendar: React.FC<ScheduleCalendarProps> = ({ type, schedules, onEdit }) => {
  // 自定义日历单元格渲染
  const dateCellRender = (value: Dayjs) => {
    const daySchedules = schedules.filter(schedule => {
      const scheduleDate = new Date(schedule.startTime);
      return scheduleDate.getFullYear() === value.year() &&
             scheduleDate.getMonth() === value.month() &&
             scheduleDate.getDate() === value.date();
    });

    if (daySchedules.length === 0) return null;

    return (
      <ul style={{ margin: 0, padding: 0 }}>
        {daySchedules.map(schedule => {
          const startTime = new Date(schedule.startTime);
          const timeText = `${startTime.getHours().toString().padStart(2, '0')}:${startTime.getMinutes().toString().padStart(2, '0')}`;
          
          return (
            <li key={schedule.id} style={{ marginTop: 4 }}>
              <Popconfirm
                title="操作"
                description="是否要调整此排课？"
                onConfirm={() => onEdit(schedule)}
                okText="调整"
                cancelText="取消"
              >
                <Button type="text" size="small" style={{ padding: 0 }}>
                  {timeText} - 课程ID: {schedule.courseId}
                </Button>
              </Popconfirm>
            </li>
          );
        })}
      </ul>
    );
  };

  // 根据视图类型返回相应的日历配置
  const renderCalendar = () => {
    if (type === 'day') {
      return <Calendar fullscreen={true} dateCellRender={dateCellRender} mode="day" />;
    } else if (type === 'week') {
      return <Calendar fullscreen={true} dateCellRender={dateCellRender} mode="week" />;
    } else {
      return <Calendar fullscreen={true} dateCellRender={dateCellRender} mode="month" />;
    }
  };

  return (
    <div style={{ marginBottom: 24 }}>
      {renderCalendar()}
    </div>
  );
};

export default ScheduleCalendar;